---
title: "code editor · RUAL Documentation"
description: "Creates a code editor based on the ace module"
canonical: https://docs.rual.nl/block-types/Component UI/component_editor_ace
language: en
---

# code editor

This block is part of the [`Component UI`](https://docs.rual.nl/block-types/Component%20UI) group and was last modified in core [`v10.4.21`](https://docs.rual.nl/core-versions/100421).

### Parent Requirements

This block requires specific parent elements: `component_form`, `uicomponent_foreach_return`, `uicomponent_dynamic_content_update`, `uicomponent_branch`, `uicomponent_switch`. Ensure this block is placed within the appropriate parent context.

Creates a code editor based on the ace module

- Field required `fielddefinitions` Field to save the value in

- Language `value` Which language should be used. Example: html, css, javascript

- Tabsize `number` How many spaces should be used on tab

- uicomponent `uicomponent`

A typical wiring for [code editor](https://docs.rual.nl/block-types/Component%20UI/component_editor_ace): [combine](https://docs.rual.nl/block-types/fields/fielddefinitions_multiple) feeds the `fielddefinitions` pin; the `uicomponent` out pin feeds [build PDF](https://docs.rual.nl/block-types/files/file_generate_pdf).

![Studio canvas example for the code editor block: typical wiring for code editor.](https://docs.rual.nl/canvas-examples/component_editor_ace.png)

### Version history

Introduced in [`v10.4.21`](https://docs.rual.nl/core-versions/100421).